<template>
  <div class="sub-component-wrapper">
    <p>子组件</p>
    <div>setupStore.recordField：{{ setupStore.recordField }}</div>
    <div>setupStore.initializedRecordField：{{ setupStore.initializedRecordField }}</div>
    <div>setupStore.recordUserField{{ setupStore.recordUserField }}</div>
    <div>recordField：{{ recordField }}</div>
    <div>initializedRecordField：{{ initializedRecordField }}</div>
    <div>user{{ user }}</div>
    <p>
      <button @click="setData">设置值</button>
      <button :style="{ marginLeft: '10px' }" @click="setDataNextTick">nextTick 设置值</button>
      <button :style="{ marginLeft: '10px' }" @click="setUserAge">setUserAge</button>
    </p>
  </div>
</template>

<script setup lang="ts">
import { useSetupStore, type SetupStore } from '@/plugins/pinia/store/setup-store';
import { ref, watch, nextTick, watchEffect } from 'vue';
import { type User } from '../types/base';

const setupStore: SetupStore = useSetupStore();

const recordField = ref<Record<string, string>>({});
const initializedRecordField = ref<Record<string, string>>({ '1': '_init1', '2': '_init2' });
const user = ref<User>({ name: 'bar', age: 13 });

const setUserAge = () => {
  setupStore.setUserAge('1', 12);
};

const setData = () => {
  const datas: Array<{ key: string; value: string }> = [
    { key: '1', value: '1' },
    { key: '2', value: '2' },
  ];
  // setupStore.setHashValues(...datas);
  // setupStore.setInitHashValues({ key: '1', value: '_new1' }, { key: '2', value: '_new2' });

  // setupStore.addUser('2', { name: '2Name', age: 3 });
  datas.forEach(({ key, value }) => {
    recordField.value[key] = value;
    initializedRecordField.value[key] = value;
  });

  user.value.name = 'foo';
  user.value.age = 14;
};

const setDataNextTick = () => {
  setupStore.setHashValue('1', '1');
  recordField.value['1'] = '1';
  initializedRecordField.value['1'] = '1';

  user.value.name = 'foo';

  nextTick(() => {
    recordField.value['2'] = '2';
    initializedRecordField.value['2'] = '2';
    setupStore.setHashValue('2', '2');
    user.value.age = 14;
  });
};

watch(recordField, newValue => {
  console.log('');
  console.log('watch recordField >>> newValue =', JSON.stringify(newValue));
});
watch(
  recordField,
  newValue => {
    console.log('');
    console.log('watch recordField deep >>> newValue =', JSON.stringify(newValue));
  },
  { deep: true },
);

watch(initializedRecordField, newValue => {
  console.log('');
  console.log('watch initializedRecordField >>> newValue =', JSON.stringify(newValue));
});
watch(
  initializedRecordField,
  newValue => {
    console.log('');
    console.log('watch initializedRecordField deep >>> newValue =', JSON.stringify(newValue));
  },
  { deep: true },
);

watch(user, newValue => {
  console.log('');
  console.log('watch user >>> newValue =', JSON.stringify(newValue));
});
watch(
  user,
  newValue => {
    console.log('');
    console.log('watch user deep >>> newValue =', JSON.stringify(newValue));
  },
  { deep: true },
);

watch(
  () => {
    return setupStore.recordField;
  },
  newValue => {
    console.log('');
    console.log('watch store >>> newValue =', JSON.stringify(newValue));
  },
);
watch(
  setupStore.recordField,
  newValue => {
    console.log('');
    console.log('watch store deep >>> newValue =', JSON.stringify(newValue));
  },
  { deep: true },
);

watchEffect(() => {
  console.log('');
  console.log('watchEffect >>> recordField.value =', JSON.stringify(recordField.value));
  console.log('watchEffect >>> initializedRecordField.value =', JSON.stringify(initializedRecordField.value));
  console.log('watchEffect >>> user.value =', JSON.stringify(user.value));
});
</script>
